<template>
	<view class="big">
		<view class="top">
			<uni-icons type="locked-filled" size="80"></uni-icons>
			<view style="margin-top: 20rpx;">请先登录</view>
		</view>
		<uni-forms style="margin-top: 50rpx; width: 90%;" class="forms">

			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item label="手机号码" required name="mobile">
						<uni-easyinput v-model="valiFormData.mobile" type="number" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="密码" required name="pwd">
						<uni-easyinput v-model="valiFormData.pwd" type="password" placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="huiyuan">登录</button>
				<view class="bottom">
					<text @click="zc">注册新账号</text>
					<text @click="mima">忘记登录密码？</text>

				</view>
			</view>

		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valiFormData: {
				},
				rules: {
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号'
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请输入正确的手机号'
							}
						],
						validateTrigger: "bind"
					},
					pwd: {
						rules: [{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								minLength: 6,
								// maxLength: 6,
								errorMessage: '请输入正确的密码'
							}
						],
						validateTrigger: "bind"
					}

				}

			}
		},
		methods: {
			// 注册账号
			zc() {
				uni.navigateTo({
					url: "../zhuce/zhuce"
				})
			},
			// 忘记密码
			mima() {
				uni.navigateTo({
					url: "../wjmm/wjmm"
				})
			},
			// 会员中心
			huiyuan() {
				this.$refs["valiForm"].validate(ret=>{
					console.log(ret)
				})
				this.valiFormData.deviceId = String(Date.now() + Math.floor(Math.random() * 1e7))
				console.log(this.valiFormData)
				uni.$u.http.post("user/m/login",this.valiFormData).then(res => {
					console.log(res)
				})
					

				// uni.navigateTo({
				// 	url:"../huiyuan/huiyuan"
				// })
			}

		},
		onLoad() {
			uni.getSystemInfo({
				success:res=>{
					this.valiFormData.deviceName=res.model
				}
			})
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	// 大盒子
	.big {
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
		/* padding-bottom: 610rpx; */
		background-color: #FFFFFF;

	}

	// 头部图案
	.top {
		width: 100%;
		height: 50%;
		text-align: center;
		padding-top: 100rpx;
	}



	// 尾部跳转
	.bottom {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
</style>
